<template>
  <div>
    <el-dialog
        title="添加PLC地址"
        :close-on-click-modal="false"
        custom-class="drive-dialog us-none"
        v-model="AddPlcDriveAddressVisible"
        width="384px"
        top="25vh"
        append-to-body
        :before-close="handleCloseAddPlcDriveAddressDialog"
    >
      <div>
        <el-form :model="PlcAddress" ref="PlcAddressRef"
                 size="small" label-width="80px" label-position="left">
          <el-form-item label="名称" prop="Name">
            <el-input v-model="PlcAddress.Name" placeholder="请输入地址名称"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="Address">
            <el-input v-model="PlcAddress.Address" placeholder="请输入地址，包含DB,类型，偏移量"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="Desc">
            <el-input v-model="PlcAddress.Desc" type="textarea" :rows="5" placeholder="请输入描述"></el-input>
          </el-form-item>
          <el-form-item label="轮询写入" prop="Cycle">
            <div style="display: flex;align-items: center">
              <el-switch
                  v-model="PlcAddress.Cycle"
                  active-color="#13ce66"
                  inactive-color="#545c64"
                  style="margin-right: 10px"
              >
              </el-switch>
              <template v-if="PlcAddress.Cycle">
                <el-input v-model="PlcAddress.CycleTime" type="number" placeholder="轮询时间">
                  <template #append>ms</template>
                </el-input>
              </template>
            </div>
          </el-form-item>
          <el-form-item prop="ValueType" label="发送类型" v-if="PlcAddress.Cycle">
            <el-switch
                active-value="multi"
                inactive-value="single"
                v-model="PlcAddress.ValueType"
                active-color="#13ce66"
                inactive-color="#545c64"
            >
            </el-switch>
            <div style="display: flex;margin-bottom: 5px">
              <el-input v-model="PlcAddress.Value1" placeholder="请输入写入值"></el-input>
              <template v-if="PlcAddress.ValueType=='multi'">
                <i class="el-icon-sort" style=" transform: rotate(90deg);margin-right: 15px"/>
                <el-input v-model="PlcAddress.Value2" placeholder="请输入写入值"></el-input>
              </template>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
             <el-button
                 @click="ConfirmAddPlcDriveAddressBtn"
                 style="color: #545c64"
                 round
                 size="small"
             >
              确认
             </el-button>
             <el-button
                 @click="handleCloseAddPlcDriveAddressDialog"
                 style="color: #545c64"
                 round
                 size="small"
             >
              取消
             </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>

import SysPlcDriverAddressApi from '@/api/flow/SysPlcDriverAddressApi'
import { MessageError, MessageSuccess } from "@/utils";
import {useFlowStore} from "@/store/modules/flow/flowStore";

export default {
  name: 'AddPlcDriveAddressDialog',
  props: {
    address: {
      type: Object,
      deep: true,
      immediate: true
    },
    driveInfo: {
      type: Object,
      deep: true,
      immediate: true
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    show (v) {
      if (v) {
        const sss = Object.assign({}, this.address)
        this.AddPlcDriveAddressVisible = true
        this.PlcAddress = sss
      }
    }
  },
  data () {
    return {
      PlcAddress: {
        Id: 0,
        DriverId: 0,
        Cycle: false,
        CycleTime: 1000,
        ValueType: 'single',
        Name: null,
        Address: null,
        Desc: null,
        Value1: null,
        Value2: null
      },
      AddPlcDriveAddressVisible: false
    }
  },
  methods: {

    /**
     * 确认按钮
     * @constructor
     */
    ConfirmAddPlcDriveAddressBtn () {
      this.PlcAddress.DriverId = this.driveInfo.Id
      const FlowStore = useFlowStore()
      new SysPlcDriverAddressApi().Install(this.PlcAddress, (res) => {
        if (res) {
          MessageSuccess("地址添加成功！");
          this.PlcAddress = res
          FlowStore.UpdatePlcAddress()
          this.$emit('confirm', Object.assign({}, res))
          this.ResetForm()
          this.handleCloseAddPlcDriveAddressDialog()
        } else {
          MessageError("地址添加失败！");
        }
      })
    },

    /**
     * 关闭窗口
     */
    handleCloseAddPlcDriveAddressDialog () {
      this.AddPlcDriveAddressVisible = false
      this.ResetForm()
      this.$emit('close')
    },
    ResetForm () {
      if (this.$refs.PlcAddressRef) {
        this.$refs.PlcAddressRef.resetFields()
      }
      // this.PlcAddress = {
      //   Id: null,
      //   DriverId: null,
      //   Cycle: false,
      //   CycleTime: 1000,
      //   ValueType: 'single',
      //   Name: null,
      //   Address: null,
      //   Desc: null,
      //   Value1: null,
      //   Value2: null
      // }
    }
  }
}
</script>

<style scoped lang="less">

</style>
